<template>
    <div class="school container">
        <div class="header">
            <div class="title">
                <img src="../../../assets/images/school.png" alt="">
                品牌学校
            </div>
            <div class="more link">查看更多
                <i class="el-icon-arrow-right"></i></div>
        </div>
        <ul class="school-contents">
            <li v-for="(item, index) in schoolList" :key="index+'sc'">
                <div class="main">
                    <div class="sch-logo fl">
                        <img :src="item.src" alt="">
                    </div>
                    <div class="sch-info fr">
                        <div class="name">{{item.name}}</div>
                        <div class="detail">
                            <span class="type">{{item.detail.type}}</span>
                            <span class="num">{{item.detail.pepoleNum}}</span>
                        </div>
                    </div>
                </div>
                <div class="line"></div>
                <div class="main-foot">
                    <div class="fl">
                        <span class="num ">{{item.jobNum}}</span>个热招职位
                    </div>
                    <div class="address fr">{{item.address}}</div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "SchoolBlock",
        data() {
            return {
                schoolList: [
                    {
                        img: '',
                        name: '惠州市综合高级中学',
                        detail: {
                            type: '民营',
                            pepoleNum:'100-499'
                        },
                        jobNum: '30',
                        address: '广州/惠州',
                        src: require('@/assets/images/图层01.png')
                    }, {
                        img: '',
                        name: '惠州市综合高级中学',
                        detail: {
                            type: '民营',
                            pepoleNum:'100-499'
                        },
                        jobNum: '30',
                        address: '广州/惠州',
                        src: require('@/assets/images/图层02.png')
                    }, {
                        img: '',
                        name: '惠州市综合高级中学',
                        detail: {
                            type: '民营',
                            pepoleNum:'100-499'
                        },
                        jobNum: '30',
                        address: '广州/惠州',
                        src: require('@/assets/images/图层01.png')
                    }, {
                        img: '',
                        name: '惠州市综合高级中学',
                        detail: {
                            type: '民营',
                            pepoleNum:'100-499'
                        },
                        jobNum: '30',
                        address: '广州/惠州',
                        src: require('@/assets/images/图层01.png')
                    }, {
                        img: '',
                        name: '惠州市综合高级中学',
                        detail: {
                            type: '民营',
                            pepoleNum:'100-499'
                        },
                        jobNum: '30',
                        address: '广州/惠州',
                        src: require('@/assets/images/图层01.png')
                    }, {
                        img: '',
                        name: '惠州市综合高级中学',
                        detail: {
                            type: '民营',
                            pepoleNum:'100-499'
                        },
                        jobNum: '30',
                        address: '广州/惠州',
                        src: require('@/assets/images/图层01.png')
                    }, {
                        img: '',
                        name: '惠州市综合高级中学',
                        detail: {
                            type: '民营',
                            pepoleNum:'100-499'
                        },
                        jobNum: '30',
                        address: '广州/惠州',
                        src: require('@/assets/images/图层01.png')
                    }, {
                        img: '',
                        name: '惠州市综合高级中学',
                        detail: {
                            type: '民营',
                            pepoleNum:'100-499'
                        },
                        jobNum: '30',
                        address: '广州/惠州',
                        src: require('@/assets/images/图层01.png')
                    }, {
                        img: '',
                        name: '惠州市综合高级中学',
                        detail: {
                            type: '民营',
                            pepoleNum:'100-499'
                        },
                        jobNum: '30',
                        address: '广州/惠州',
                        src: require('@/assets/images/图层01.png')
                    }, {
                        img: '',
                        name: '惠州市综合高级中学',
                        detail: {
                            type: '民营',
                            pepoleNum:'100-499'
                        },
                        jobNum: '30',
                        address: '广州/惠州',
                        src: require('@/assets/images/图层01.png')
                    }, {
                        img: '',
                        name: '惠州市综合高级中学',
                        detail: {
                            type: '民营',
                            pepoleNum:'100-499'
                        },
                        jobNum: '30',
                        address: '广州/惠州',
                        src: require('@/assets/images/图层01.png')
                    }, {
                        img: '',
                        name: '惠州市综合高级中学',
                        detail: {
                            type: '民营',
                            pepoleNum:'100-499'
                        },
                        jobNum: '30',
                        address: '广州/惠州',
                        src: require('@/assets/images/图层01.png')
                    }
                ]
            }
        }
    }
</script>

<style scoped lang="less">
    .school {
        background: #F7F8FA;
        margin-top: 18px;
        overflow: hidden;
        .header {
            height: 42px;
            line-height: 42px;
            background: #FFFFFF;
            padding: 0 18px 0 30px;
            overflow: hidden;
            .title {
                float: left;
                font-size: 18px;
                color: #333333;
                position: relative;
                padding-left: 32px;
                img {
                    position:absolute;
                    left: 0;
                    top: 10px;
                }
            }
            .more {
                float: right;
                font-size: 16px;
                color: #188EEE;
            }
        }
        .school-contents {
            margin-top: 14px;
            height: 460px;
            overflow: hidden;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
            li {
                width: 292px;
                height: 144px;
                padding: 18px;
                background: #fff;
                box-sizing: border-box;
                .main {
                    overflow: hidden;
                    .sch-logo {
                        width: 63px;
                        height: 54px;
                        background: #333;
                    }
                    .sch-info {
                        text-align: right;
                        .name {
                            font-size: 17px;
                            color: #333333;
                        }
                        .detail {
                            margin-top: 13px;
                            font-size: 14px;
                            color: #A0A0A0;
                        }
                    }
                }
                .line {
                    width: 100%;
                    height: 1px;
                    border-top: 1px dashed #F6F3F3;
                    margin: 13px 0;
                }
                .main-foot {
                    overflow: hidden;
                    font-size: 15px;
                    color: #999999;
                    .num {
                        color: #E61F1F;
                    }
                }
            }
        }
    }
</style>